<template>
    <div class="app-container">
        <div class="search-container">
            <el-form ref="queryFormRef" :model="queryParams" :inline="true">
                <el-form-item prop="keywords" label="关键字">
                    <el-input
                        v-model="queryParams.keywords"
                        placeholder="角色名称"
                        clearable
                        @keyup.enter="handleQuery"
                    />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="handleQuery"
                        ><i-ep-search />搜索</el-button
                    >
                    <el-button @click="resetQuery"
                        ><i-ep-refresh />重置</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
        <el-card shadow="never" class="table-container">
            <template #header>
                <el-button type="success" @click="openDialog()"
                    ><i-ep-plus />新增</el-button
                >
                <el-button
                    type="danger"
                    :disabled="ids.length === 0"
                    @click="handleDelete()"
                    ><i-ep-delete />删除</el-button
                >
            </template>

            <el-table
                ref="dataTableRef"
                v-loading="loading"
                :data="roleList"
                highlight-current-row
                border
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="角色名称" prop="name" min-width="100" />
                <el-table-column label="角色编码" prop="code" width="150" />

                <el-table-column label="状态" align="center" width="100">
                    <template #default="scope">
                        <el-tag v-if="scope.row.status === 1" type="success"
                            >正常</el-tag
                        >
                        <el-tag v-else type="info">禁用</el-tag>
                    </template>
                </el-table-column>

                <el-table-column
                    label="排序"
                    align="center"
                    width="80"
                    prop="sort"
                />

                <el-table-column fixed="right" label="操作" width="220">
                    <template #default="scope">
                        <el-button
                            type="primary"
                            size="small"
                            link
                            @click="openMenuDialog(scope.row)"
                        >
                            <i-ep-position />分配权限
                        </el-button>
                        <el-button
                            type="primary"
                            size="small"
                            link
                            @click="openDialog(scope.row.id)"
                        >
                            <i-ep-edit />编辑
                        </el-button>
                        <el-button
                            type="primary"
                            size="small"
                            link
                            @click="handleDelete(scope.row.id)"
                        >
                            <i-ep-delete />删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <pagination
                v-if="total > 0"
                v-model:total="total"
                v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"
                @pagination="handleQuery"
            />
        </el-card>
        <!-- 分配菜单弹窗  -->
        <el-dialog
            v-model="menuDialogVisible"
            :title="'【' + checkedRole.name + '】权限分配'"
            width="800px"
        >
            <el-scrollbar v-loading="loading" max-height="600px">
                <el-tree
                    ref="menuRef"
                    node-key="value"
                    show-checkbox
                    :data="menuList"
                    :default-expand-all="true"
                >
                    <template #default="{ data }">
                        {{ data.label }}
                    </template>
                </el-tree>
            </el-scrollbar>

            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="handleRoleMenuSubmit"
                        >确 定</el-button
                    >
                    <el-button @click="menuDialogVisible = false"
                        >取 消</el-button
                    >
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { RoleQuery, RolePageVO, RoleForm } from '@/api/role/model'
import RoleAPI from '@/api/role'
import MenuAPI from '@/api/menu'
// store
// state
const menuRef = ref<ElTree>()
const menuList = ref<OptionType[]>([])
const menuDialogVisible = ref(false)
const formData = reactive<RoleForm>({
    sort: 1,
    status: 1,
    code: '',
    name: '',
})
interface CheckedRole {
    id?: number
    name?: string
}
let checkedRole: CheckedRole = reactive({})
const loading = ref(false)
const ids = ref<number[]>([])
const queryFormRef = ref<ElForm>()
const queryParams = reactive<RoleQuery>({
    pageNum: 1,
    pageSize: 10,
})
const roleList = ref<RolePageVO[]>()
const total = ref(0)
const dialog = reactive({
    title: '',
    visible: false,
})
// action
/** 查询 */
function handleQuery() {
    // loading.value = true;
    RoleAPI.getPage(queryParams)
        .then((data) => {
            roleList.value = data.list
            total.value = data.total
        })
        .finally(() => {
            // loading.value = false;
        })
}
/** 重置查询 */
function resetQuery() {
    queryFormRef.value.resetFields()
    queryParams.pageNum = 1
    handleQuery()
}
/** 打开角色表单弹窗 */
function openDialog(roleId?: number) {
    dialog.visible = true
    if (roleId) {
        dialog.title = '修改角色'
        RoleAPI.getFormData(roleId).then((data) => {
            Object.assign(formData, data)
        })
    } else {
        dialog.title = '新增角色'
    }
}
/** 删除角色 */
function handleDelete(roleId?: number) {
    const roleIds = [roleId || ids.value].join(',')
    if (!roleIds) {
        ElMessage.warning('请勾选删除项')
        return
    }

    ElMessageBox.confirm('确认删除已选中的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        loading.value = true
        RoleAPI.deleteByIds(roleIds)
            .then(() => {
                ElMessage.success('删除成功')
                resetQuery()
            })
            .finally(() => (loading.value = false))
    })
}
/** 行checkbox 选中事件 */
function handleSelectionChange(selection: any) {
    ids.value = selection.map((item: any) => item.id)
}
/** 打开分配菜单弹窗 */
async function openMenuDialog(row: RolePageVO) {
    const roleId = row.id
    if (roleId) {
        checkedRole = {
            id: roleId,
            name: row.name,
        }
        menuDialogVisible.value = true
        loading.value = true

        // 获取所有的菜单
        menuList.value = await MenuAPI.getOptions()

        // 回显角色已拥有的菜单
        RoleAPI.getRoleMenuIds(roleId)
            .then((data) => {
                const checkedMenuIds = data
                checkedMenuIds.forEach((menuId) =>
                    menuRef.value.setChecked(menuId, true, false)
                )
            })
            .finally(() => {
                loading.value = false
            })
    }
}
/** 角色分配菜单保存提交 */
function handleRoleMenuSubmit() {
    const roleId = checkedRole.id
    if (roleId) {
        const checkedMenuIds: number[] = menuRef.value
            .getCheckedNodes(false, true)
            .map((node: any) => node.value)

        loading.value = true
        RoleAPI.updateRoleMenus(roleId, checkedMenuIds)
            .then(() => {
                ElMessage.success('分配权限成功')
                menuDialogVisible.value = false
                resetQuery()
            })
            .finally(() => {
                loading.value = false
            })
    }
}
// 生命周期
onMounted(() => {
    handleQuery()
})
</script>

<style scoped></style>
